<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'PersonalCenter.jsp' starting page</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">

	<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
	<link rel="stylesheet" type="text/css" href="css/address.css">
	<link rel="stylesheet" type="text/css" href="css/flower.css">
	<link rel="stylesheet" type="text/css" href="css/flowerYang.css">
	<link rel="stylesheet" type="text/css" href="css/flowerShen.css">

	<style type="text/css">
		.add-address:hover {
			color: #fff;
		}
		/*	隐藏的添加默认地址框*/
		body .layer {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 9999;
			display: none;
		}
		body .layer-shade {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 1;
			background: rgba(35, 38, 40, 0.5);
		}
		body .layer-content {
			position: absolute;
			left: 50%;
			top: 196px;
			z-index: 2;
			margin-left: -265px;
			padding: 34px 44px;
			width: 530px;
			background: #ffffff;
			border-radius: 8px;
			-webkit-animation: slideUp 0.24s;
			animation: slideUp 0.24s;
		}
		body .layer-content-close {
			position: absolute;
			right: 12px;
			top: 12px;
			cursor: pointer;
		}
		body .layer-content-title {
			font-size: 18px;
			font-weight: 600;
			text-align: center;
			padding-bottom: 16px;
		}
		.layer .order-item-li {
			margin-top: 14px;
			font-size: 0;
		}
		.layer .order-item-title::before {
			content: '*';
			color: #FF734C;
			font-size: 13px;
			margin-right: 3px;
		}
		.layer .order-item-title {
			display: inline-block;
			width: 109px;
			font-size: 14px;
			font-weight: 400;
		}
		.layer .order-item-input {
			width: 324px;
			height: 32px;
			border-radius: 2px;
			border: 1px solid #d2d2d2;
			padding: 6px 12px;
			font-size: 14px;
			letter-spacing: 0.5px;
		}
		.layer .order-item-input-box {
			display: inline-block;
			width: 324px;
			height: 32px;
			border-radius: 2px;
			font-size: 0;
			position: relative;
		}
		.layer .order-item-input-box input {
			width: 100%;
			height: 100%;
			letter-spacing: 0.5px;
			font-size: 12px;
		}
		.layer .order-item-select {
			width: 96px;
			height: 32px;
			border: 1px solid #d2d2d2;
			padding: 6px 0 6px 12px;
			margin-right: 8px;
			font-size: 13px;
		}
		.layer .order-item-saveAddr {
			margin-top: 30px;
			margin-left: 110px;
			font-size: 0;
		}
		.layer .order-item-saveAddr button {
			width: 36%;
			height: 36px;
			line-height: 36px;
			text-align: center;
			border-radius: 27px;
			font-size: 15px;
			border: none;
			outline: none;
			cursor: pointer;
		}
		.layer .order-item-saveAddr button.layer_add {
			background: #ff734c;
			color: #ffffff;
		}
		.layer .order-item-saveAddr button.layer_cancel {
			margin-left: 8%;
			color: #71797F;
			border: 1px solid #b4babf;
			background-color: #ffffff;
		}
	</style>
</head>
<body class="home">
	<%@ include file="GeTop.jsp"%>

	<!-- 导航 End -->
	<div class="main clearfix">
		<div class="main-container">
			<div class="breadcrumbs">
				<a href="index.shtml">首页</a> &gt; <a href="/Member/MemberCenter/">会员中心</a>
				&gt; <a href="/Member/MemberCenter/">会员中心</a>
			</div>
			<div class="wrapper about clearfix">

				<!--中间部分  -->
				<div class="pull-left right-main">
					<div class="member-r">
						<div class="address-wrap">
							<div class="address-add">
								<a href="javascript:;" class="add-address" onclick="$('.layer.add').show(); return false;">新增收货地址</a>
								<span class="address-sub">您已创建<span id="addressNum" style="margin-left: 0">2</span>个收货地址，最多可建50个</span>
							</div>
							<table>
								<thead>
									<tr>
										<th class="consignee">收货人</th>
										<th class="shipping">收货地址</th>
										<th class="phone">联系电话</th>
										<th>操作</th>
									</tr>
								</thead>
								<tbody>
									<c:forEach items="${ress }" var="ress">
										<tr class="address-info" dataid="${ress.id}">
											<th class="consignee">${ress.shouName }</th>
											<th class="shipping">${ress.sheng }${ress.shi }${ress.qu }${ress.addressContent }</th>
											<th class="phone">${ress.phone }</th>
											<th>
												<div class="address-item-update">
													<img class="address-icon" src="https://img02.hua.com/pc/Images/2021new/address-edit.png" alt=""> 修改
												</div>
												<div class="address-item-delete">
													<img class="address-icon" src="https://img02.hua.com/pc/Images/2021new/address-del.png" alt=""> 删除
												</div>
												<c:if test="${ress.isDefault}" var="moren">
													<div style="width:100px">默认地址</div>
												</c:if>
												<c:if test="${!moren}" >
													<div style="width:100px" class="sheWeiMoRenAddress">设为默认地址</div>
												</c:if>
											</th>
										</tr>
									</c:forEach>
								</tbody>
							</table>
						</div>
					</div>
				</div>
				<%@include file="GeLeft.jsp"%>
			</div>
		</div>
	</div>

	<%--添加收获地址框--%>
	<div class="layer add">
		<div class="layer-shade"></div>
		<div class="layer-content">
			<div class="layer-content-close"><img src="image/loginImg/closeImg.png" alt="关闭"></div>
			<div class="layer-content-title">新增收获地址</div>

			<div class="order-item-li">
				<label class="order-item-title">收货人</label>
				<input class="order-item-input" placeholder="请输入收货人姓名" type="text"  name="toName" maxlength="15">
			</div>
			<div class="order-item-li">
				<label class="order-item-title">手机号码</label>
				<input class="order-item-input" placeholder="请输入收货人手机号码" type="text" name="toPhone" maxlength="15">
			</div>
			<div class="order-item-li">
				<label class="order-item-title">所在地区</label>
				<select name="" class="order-item-select j1">

				</select>
				<select name="" class="order-item-select j2">

				</select>
				<select name="" class="order-item-select j3">

				</select>
			</div>
			<div class="order-item-li">
				<label class="order-item-title">详细地址</label>
				<div class="order-item-input-box">
					<input placeholder="请输入收货人详细地址" type="text" name="toAddressDetails" maxlength="15" >
				</div>
			</div>

			<div class="order-item-saveAddr">
				<button class="layer_add">保存并使用</button>
				<button class="layer_cancel">取消</button>
			</div>
		</div>
	</div>
	<%--修改收获地址框--%>
	<div class="layer update" dataid="">
		<div class="layer-shade"></div>
		<div class="layer-content">
			<div class="layer-content-close"><img src="image/loginImg/closeImg.png" alt="关闭"></div>
			<div class="layer-content-title">修改收获地址</div>

			<div class="order-item-li">
				<label class="order-item-title">收货人</label>
				<input class="order-item-input" placeholder="请输入收货人姓名" type="text"  name="toName" maxlength="15">
			</div>
			<div class="order-item-li">
				<label class="order-item-title">手机号码</label>
				<input class="order-item-input" placeholder="请输入收货人手机号码" type="text" name="toPhone" maxlength="15">
			</div>
			<div class="order-item-li">
				<label class="order-item-title">所在地区</label>
				<select name="" class="order-item-select j1s">

				</select>
				<select name="" class="order-item-select j2s">

				</select>
				<select name="" class="order-item-select j3s">

				</select>
			</div>
			<div class="order-item-li">
				<label class="order-item-title">详细地址</label>
				<div class="order-item-input-box">
					<input placeholder="请输入收货人详细地址" type="text" name="toAddressDetails" maxlength="15" >
				</div>
			</div>

			<div class="order-item-saveAddr">
				<button class="layer_add">保存并使用</button>
				<button class="layer_cancel">取消</button>
			</div>
		</div>
	</div>
	<!-- 尾部导航 -->
	<%@ include file="bottom.jsp"%>
	<script type="text/javascript">
		$(function(){
			//发送ajax请求查询用户地址总条数
			$.post("user/address.shtml",{"flag":"selectAddressCount"},function(num){
				$("#addressNum").html(num);
			});
			//点击设置为默认地址
			$(document).on("click",".sheWeiMoRenAddress",function(){
				let id = $(this).parents("tr").attr("dataid");
				$.post("user/address.shtml",{"flag":"setdefault","id":id},function(d){
					location.reload();//刷新页面
				});
			});
			//点击删除
			$(document).on("click",".address-item-delete",function(){
				//获取收获地址编号
				let id = $(this).parents("tr").attr("dataid");
				if(confirm("确认删除该条地址信息吗？")){
					$.post("user/address.shtml",{"flag":"deleteAddress","id":id},function(d){
						location.reload();//刷新页面
					});
				}
			});
			//点击修改
			$(document).on("click",".address-item-update",function(){
				let id = $(this).parents("tr").attr("dataid");
				//发送请求到ajax查询该条地址
				$.post("user/address.shtml",{"flag":"selectById","id":id},function(data){
					data = eval("("+data+")");
					$(".layer.update input[name='toName']").val(data.shouName);
					$(".layer.update input[name='toPhone']").val(data.phone);
					$(".layer.update input[name='toAddressDetails']").val(data.addressContent);
					$(".j1s").val(data.province);
					var shi = data.city;
					var qu = data.area;
					$.ajax({
						url:"user/province.shtml",
						type:"post",
						data:{"pid":data.province},
						success:function(result){
							$(".j2s").empty();
							result = eval("("+result+")");
							$(result).each(function(i,e){
								$(".j2s").append("<option value="+e.id+">"+e.name+"</option>");
							});
							$(".j2s").val(shi);
						}
					});
					$.ajax({
						url:"user/province.shtml",
						type:"post",
						data:{"pid":shi},
						success:function(result){
							$(".j3s").empty();
							result = eval("("+result+")");
							$(result).each(function(i,e){
								$(".j3s").append("<option value="+e.id+">"+e.name+"</option>");
							});
							$(".j3s").val(qu);
						}
					});

				});
				//显示修改地址框
				$(".layer.update").show();
				//在修改地址框中 给上id属性值
				$(".layer.update").attr("dataid",id);
			});
			//点击添加地址信息
			$(".layer.add .layer_add").click(function() {
				//获取姓名 手机号 详细地址
				var name = $(".layer.add input[name='toName']").val();
				var phone = $(".layer.add input[name='toPhone']").val();
				var addressDetails = $(".layer.add input[name='toAddressDetails']").val();
				var rge = /^1[34578][0-9]{9}$/;//手机号正则表达式
				if (name == "") {
					alert("请输入收获人姓名");
					return;
				}
				if (phone == "") {
					alert("请输入电话号码");
					return;
				}
				if (addressDetails == "") {
					alert("请输入详细地址");
					return;
				}
				if (!rge.test(phone)) {
					alert("手机号输入有误");
					return;
				}
				var sheng = $(".j1").val();
				var shi = $(".j2").val();
				var qu = $(".j3").val();
				if (shi == undefined) {
					shi = 222;
				}
				if (qu == undefined) {
					qu = 222;
				}
				var obj = {
					"flag": "insertAddress",
					"name": name,
					"phone": phone,
					"addressDetails": addressDetails,
					"j1": sheng,
					"j2": shi,
					"j3": qu
				}
				//发送ajax请求添加地址信息
				$.post("user/address.shtml", obj, function (d) {
					if (d != "") {
						alert("添加地址成功");
						location.reload();//刷新页面
					}
				});
			});
			//点击修改的保存
			$(".layer.update .layer_add").click(function(){
				//获取要修改的编号
				var id = $(".layer.update").attr("dataid");
				//获取姓名 手机号 详细地址
				var name = $(".layer.update input[name='toName']").val();
				var phone = $(".layer.update input[name='toPhone']").val();
				var addressDetails = $(".layer.update input[name='toAddressDetails']").val();
				var rge = /^1[34578][0-9]{9}$/;//手机号正则表达式
				if(name==""){
					alert("请输入收获人姓名");
					return;
				}
				if(phone==""){
					alert("请输入电话号码");
					return;
				}
				if(addressDetails==""){
					alert("请输入详细地址");
					return;
				}
				if(!rge.test(phone)){
					alert("手机号输入有误");
					return;
				}
				var sheng = $(".j1s").val();
				var shi = $(".j2s").val();
				var qu = $(".j3s").val();
				if(shi==undefined){
					shi = 222;
				}
				if(qu==undefined){
					qu=222;
				}
				var obj = {
					"flag":"updateAddress",
					"id":id,
					"name":name,
					"phone":phone,
					"addressDetails":addressDetails,
					"j1":sheng,
					"j2":shi,
					"j3":qu
				}
				//发送ajax请求添加地址信息
				$.post("user/address.shtml",obj,function(d){
					if(d!=""){
						alert("修改地址成功");
						location.reload();//刷新页面
					}
				});
			});
			//加载页面发送ajax获取地址
			$.ajax({
				url:"user/province.shtml",
				type:"post",
				data:{"pid":0},
				success:function(result){
					result = eval("("+result+")");
					$(result).each(function(i,e){
						$(".j1").append("<option value="+e.id+">"+e.name+"</option>");
						$(".j1s").append("<option value="+e.id+">"+e.name+"</option>");
					});
				}
			});
			$(".j1").change(function(){
				var pid = $(this).val();
				$.ajax({
					url:"user/province.shtml",
					type:"post",
					data:{"pid":pid},
					success:function(result){
						$(".j2").empty();
						result = eval("("+result+")");
						$(result).each(function(i,e){
							$(".j2").append("<option value="+e.id+">"+e.name+"</option>");
						});
						$(".j2").change();
					}
				});
			});
			$(".j2").change(function(){
				var pid = $(this).val();
				$.ajax({
					url:"user/province.shtml",
					type:"post",
					data:{"pid":pid},
					success:function(result){
						$(".j3").empty();
						result = eval("("+result+")");
						$(result).each(function(i,e){
							$(".j3").append("<option value="+e.id+">"+e.name+"</option>");
						});
					}
				});
			});
			$(".j1s").change(function(){
				var pid = $(this).val();
				$.ajax({
					url:"user/province.shtml",
					type:"post",
					data:{"pid":pid},
					success:function(result){
						$(".j2s").empty();
						result = eval("("+result+")");
						$(result).each(function(i,e){
							$(".j2s").append("<option value="+e.id+">"+e.name+"</option>");
						});
						$(".j2s").change();
					}
				});
			});
			$(".j2s").change(function(){
				var pid = $(this).val();
				$.ajax({
					url:"user/province.shtml",
					type:"post",
					data:{"pid":pid},
					success:function(result){
						$(".j3s").empty();
						result = eval("("+result+")");
						$(result).each(function(i,e){
							$(".j3s").append("<option value="+e.id+">"+e.name+"</option>");
						});
					}
				});
			});
		});
			//点击其他阴影地方时 和点击取消和X号时 隐藏该窗口
			$(".layer.add .layer-shade").click(function(){
				$(".layer.add").hide();
			});
			$(".layer.add .layer-content-close").click(function(){
				$(".layer.add").hide();
			});
			$(".layer.add .layer_cancel").click(function(){
				$(".layer.add").hide();
			});
			//点击其他阴影地方时 和点击取消和X号时 隐藏该窗口  修改地址框
			$(".layer.update .layer-shade").click(function(){
				$(".layer.update").hide();
			});
			$(".layer.update .layer-content-close").click(function(){
				$(".layer.update").hide();
			});
			$(".layer.update .layer_cancel").click(function(){
				$(".layer.update").hide();
			});



	</script>
</body>


</html>
